<template>
	<view class="cart-index" :style="[{paddingTop:statusBar+ 'px'}]">
			<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
			<view class="navigation" :style="[{top:statusBar+ 'px'}]">
				<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
				<view class="navigation-title">盲箱</view>
			</view>
			<view class="navigation-position"></view>
			<view class="box-content">
				<image src="/static/images/box-top.png" mode="" class= "box-top-image"></image>
				<scroll-view scroll-x scroll-width-animation class="content" :scroll-left="scrollLeft">
				  <view class="items">
				    <block v-for="(category, index) in categories" :key="index">
						<view :id="'_c_' + index" class="item"  :class="{'item-active': activeIndex === index}" :style="{color: activeIndex === index ? defaultConfig.activeColor : defaultConfig.textColor}" @click="onClick(index)">{{ category.name }}</view>
					</block>
				  </view>
				  <view
				      class="underline"
				      :style="{
				        transform: 'translateX('+underline.left+'px)',
				        width: defaultConfig.underlineWidth,
				        backgroundColor: defaultConfig.underlineColor
				  }"></view>
				</scroll-view>
				<view class="box-list">
					<block v-for="(box, index) in boxes" :key="index" >
						<view class="box-list-item" @click="goToBox(box)">
							<image class="pic" model="" :src="box.image"></image>
							<view class="box-title">{{box.name}}</view>
							<view class="box-price">
								<text class="box-sologn">热-CLUB：</text>
								<text >¥{{box.price}}</text>
								
							</view>
							<view class="box-btn">¥{{box.min_product_price}}～¥{{box.max_product_price}}</view>
						</view>
					</block>
					<view class="no-more" v-if="pageHasNoMore">
					  --- 没有更多数据了 ---
					</view>
					
				</view>
			</view>
	</view>
	
</template>

<script>
import store from 'store'
import Pagination from "mixins/Pagination"
import { mapGetters, mapActions } from 'vuex'
import { getBoxCategories , getBoxs} from "api/boxApi.js";
import Skeleton from "mixins/Skeleton";
import AuthChecking from "mixins/AuthChecking";
import SkeletonMineCom from "skeletons/SkeletonMineCom";
export default {
  name: "box",
  store,
 
  components: {
  	SkeletonMineCom
  },
  data() {
    return {
      categories: [],
	  boxes: [],
	  activeIndex: 0,
	  scrollLeft: 0,
	  defaultConfig: {
	    textColor: '#999',
	    activeColor: '#000000',
	    underlineWidth: 24,
	    underlineColor: '#333'
	  },
	  underline: {
	    left: 30
	  }
	}
  },
  mixins:[
  	Pagination,
	Skeleton,
	AuthChecking
  ],
  watch: {
    config: {
      handler(val) {
        this.defaultConfig = { ...this.defaultConfig, ...val }
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters([
			'statusBar',
			'user',
			'isLogin'
    ])
  },
  methods: {
	  goToBox(box) {
	    uni.navigateTo({url: `/packs/pages/box/show?box_id=${box.id}`})
	  },
	  updateUnderline() {
	    let list = this.categories
		if (list.length === 0) return;
	    const query = uni.createSelectorQuery().in(this)
	    this.categories.forEach((item, index) => {
	      query.select('#_c_' + index)
	          .boundingClientRect((res) => {
	            if (res) {
					
	              item._underline = {
	                left: res.left + (res.width - this.defaultConfig.underlineWidth) / 2
	              }
	              if (list.length - 1 === index) {
	                this.slideToIndex()
	              }
	            }
	          }).exec()
	    })
		
		/* this.categories = list;
		console.log(this.categories);return false; */
	  },
	  slideToIndex() {
	    const index = this.activeIndex
	    this.underline = {
	      left: this.categories[index]._underline.left
	    }
	    this.scrollLeft = this.activeIndex * this.defaultConfig.underlineWidth * 2
	  },
	  async onClick(index) {
	    this.activeIndex = index
	    this.slideToIndex();
		await this.loadPageData()
		/* let params = {
			blind_box_category_id:this.categories[index].id
		}
		this.categoryClicked(params); */
	  },
	  async loadPageItems() {
		  console.log(this.pageNumber);
		let params = {
		  	blind_box_category_id:this.categories[this.activeIndex].id,
			page: this.pageNumber
		}
		let response = await getBoxs(params);
		let boxes = response.data;
		this.boxes = boxes
		return response;
	  },
	  async loadCategories() {
	    const response = await getBoxCategories()
	    const categories = response.data;
		
	    this.categories = categories
		await this.loadPageData()
		/* if(this.categories.length>0){
			let params = {
				blind_box_category_id:this.categories[this.activeIndex].id
			}
			this.categoryClicked(params);
		} */
		setTimeout(() => {
		  this.updateUnderline()
		}, 10)
	  },
	  async onLoad(options){
		  if(await this.isLogin){
			this.loadCategories()
		 }
	  }
	  
	  
  }
 } 
</script>

<style lang="scss" scoped>
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.box-top-image{
		width:750rpx;
		height:386rpx;
	}
	.box-category{
		width:100%;
		height:90rpx;
		background:#fff;
		display:flex;
		line-height:90rpx;
		text-align: center;
	}
	.catrgory-nav-itmes{
		width:25%;
		
	}
	
	.content {
	  white-space: nowrap;
	  width: 100%;
	  height: 90rpx;
	  box-sizing: border-box;
	  position: relative;
	  .items {
	    height: 72rpx;
		line-height:72rpx;
	    .item {
	      display: inline-block;
	      position: relative;
	      padding: 0 30rpx;
	      height: 100%;
		  color:#999;
	      text-align: center;
	      &-active {
	        color: red;
	        font-weight: bold;
	      }
					.top-num{
						// font-size: 28rpx;
						// color:#FF4924;
					}
					// .top-num{
					// 	font-size: 20rpx;
					// 	color:red;
					// 	width: 50rpx;
					// 	height: 30rpx;
					// 	position: absolute;
					// 	display: flex;
					// 	align-items: center;
					// 	justify-content: center;
					// 	border-radius:6rpx;
					// 	right:-20rpx;
					// 	top:10rpx;
					// 	background: linear-gradient(90deg, #FDE1F3 0%, #FFF5ED 100%);
					// }
	    }
	  }
	  .underline {
	    position: absolute;
	    bottom: -1;
	    width: 48rpx;
	    height: 6rpx;
	    display: block;
	    transition: .5s;
	  }
	}
	.box-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top:20rpx;
	}
 .box-list-item{
	 width:350rpx;
	 height:520rpx;
	 background:#fff;
	 margin-left:16rpx;
	 text-align: center;
	 .pic{
		 width:292rpx;
		 height:292rpx;
		 margin-top:4rpx;
		 
	 }
	 .box-title{
		 margin-left:12rpx;
		 font-size:26rpx;
		 color:#333;
		 text-align: left;
		 margin-top:22rpx;
		 overflow: hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 
	 }
	 .box-price{
		 margin-left:12rpx;
		 font-size:22rpx;
		  color:#333;
		 text-align: left;
		margin-top:24rpx;
		 
	 }
	 .box-sologn{
		 color:#999;
		 
	 }
	 .box-btn{
		 width:270rpx;
		 height:58rpx;
		 line-height:58rpx;
		 border:2rpx solid #999;
		 color:#999;
		 text-align: center;
		 margin:24rpx auto 0rpx;
		 font-size: 28rpx;
	 }
 }
 .no-more {
   width: 100%;
   font-size: 24rpx;
   text-align: center;
   color: #cccccc;
 }
/* #ifdef H5 */
::v-deep .uni-scroll-view::-webkit-scrollbar {
  display: none;
}
 ::v-deep .uni-scroll-view {
  scrollbar-width: none;
}
/* #endif */	
</style>